<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 200px;
            position: absolute;
            display: none;
        }

        li {
            width: 100%;
            height: 40px;
            /* 宽度包含border 设置为content-box则宽度不包含border */
            box-sizing: border-box;
            border: 2px solid #333;
            text-align: center;
        }

        li.active {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <ul id="myMenu">
        <li>修身</li>
        <li>齐家</li>
        <li>治国</li>
        <li>撩妹</li>
    </ul>
    <!-- 
    2. 加强自定义菜单【√】
    ·单击鼠标右键的时候弹出自定义菜单(修身，齐家，治国，平天下)
    ·菜单项有点击时log一下菜单名称，之后菜单消失
    ·鼠标滑过哪个菜单项哪个菜单项高亮        
     -->
    <script>
        var myMenu = document.querySelector("#myMenu")
        var lis = document.querySelectorAll("#myMenu>li")

        document.addEventListener(
            "contextmenu",
            function (e) {
                e.preventDefault()

                // 出现
                myMenu.style.display = "block"

                // 右击事件发生的位置即快捷菜单的位置（参照物page）
                myMenu.style.left = e.pageX + "px"
                myMenu.style.top = e.pageY + "px"
            }
        )

        // 
        myMenu.addEventListener(
            "click",
            function (e) {
                console.log(e.target.innerText);
                myMenu.style.display = "none"
            }
        )

        /* 菜单项鼠标滑过高亮：非委托 */
        // lis中的所有li添加移入移出事件
        // lis.forEach(
        //     function(li,index){
        //         li.onmouseenter = function(e){
        //             this.classList.add("active")
        //         }

        //         li.onmouseleave = function(e){
        //             this.classList.remove("active")
        //         }
        //     }
        // )

        /* 菜单项鼠标滑过高亮：委托 */
        // 当前被鼠标覆盖的菜单项
        var currentHoveredMenuItem = null
        myMenu.addEventListener(
            "mousemove",
            function (e) {
                // console.log("mousemove",e.target);

                // mousemove事件是源源不断的
                // 如果对每个mousemove事件都加以处理（特别是在处理函数中做DOM操作）
                // 则页面会【抖动】

                // 在成堆的mousemove事件中
                // 我只在e.target发生变化时对事件加以处理
                // 就好比100个mousemove事件 我只选择性地处理其中一个
                // 【事件节流】
                // 此处以事件节流的方式实现了【防抖】
                if (e.target !== currentHoveredMenuItem) {
                    console.log("菜单项发生变化",e.target);
                    currentHoveredMenuItem = e.target

                    // 所有孩子全部取消active
                    lis.forEach(
                        function (li, index) {
                            li.classList.remove("active")
                        }
                    )

                    // 末梢元素添加active
                    e.target.classList.add("active")
                }
            }
        )
        
        // myMenu.addEventListener(
        //     "mouseleave",
        //     function(e){

        //     }
        // )

    </script>
</body>

</html>